<template>
  <div class="home">
    <div class="">
      <div class="">
        <ul class="nav nav-tabs flex flex-col md:flex-row flex-wrap list-none border-b-0 pl-0 mb-4" id="tabs-tab"
            role="tablist">
            <li class="nav-item" role="presentation">
                <a href="#tabs-all" class="
                    nav-link
                    block
                    font-medium
                    text-xs
                    leading-tight
                    uppercase
                    border-x-0 border-t-0 border-b-2 border-transparent
                    px-6
                    py-3
                    my-2
                    hover:border-transparent hover:bg-gray-100
                    focus:border-transparent
                    active
                    " id="tabs-all-tab" data-bs-toggle="pill" data-bs-target="#tabs-all" role="tab"
                    >All</a>
            </li>
            <li class="nav-item" role="presentation">
                <a href="#tabs-my" class="
                    nav-link
                    block
                    font-medium
                    text-xs
                    leading-tight
                    uppercase
                    border-x-0 border-t-0 border-b-2 border-transparent
                    px-6
                    py-3
                    my-2
                    hover:border-transparent hover:bg-gray-100
                    focus:border-transparent"
                    :class="{disabled: !isLoggedIn}"
                    id="tabs-my-tab" data-bs-toggle="pill" data-bs-target="#tabs-my" role="tab"
                    :data-te-target="isLoggedIn?'':'tooltip'"
                    :title="isLoggedIn?'':'log in to see your own course'"
                    :disabled="!isLoggedIn"
                    >My</a>
            </li>
        </ul>
        <div class="tab-content" id="tabs-tabContent">
            <div class="tab-pane fade show active" id="tabs-all" role="tabpanel" >
              <Courses></Courses>
            </div>
            <div class="tab-pane fade" id="tabs-my" role="tabpanel" >
              <Courses :userId="this.$store.state.user.id"></Courses>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Courses from "./Courses.vue"

export default {
  name: "Home",
  components: {
    Courses,
  },
  computed: {
    isLoggedIn() {
      if (this.$store.state.user.name === '') return false;
      return true;
    },
  },
  methods: {
  },
};
</script>
